<template>
    <div :style="{marginTop:$store.state.navbarHeight+12+'rpx'}">
        <Navbar :title="(info.title)" :showIcon="true" bgColor="bg-gradual-1" />
        <div class="container" :style="{marginTop:customBar()*2+12+'rpx'}">
            <template v-if="info.isFree||info.price">
                <div class="not-vip" @click.prevent="" catchtap="preventPlay" @touchmove.prevent="" @click.stop="" v-if="!isBuy&&((info.isFree||info.price)&&$store.state.config.canPlay)">
                    <span v-if="!isBuy" class="notice">بۇ كىنو ھەقلىق ئىكەن ، سېتىۋالغاندىن كىيىن كۆرەلەيسىز </span>
                    <div class="btn-group">
                        <span class="back" @click.prevent="navigateBack">قايتىش</span>
                        <span class="open" @click.prevent="buyVideo">سېتىۋېلىش </span>
                    </div>
                </div>
            </template>
            <template v-if="!(info.isFree||info.price)&&(info.isVip&&!userStatus.isVip&&$store.state.config.canPlay)">
                <div class="not-vip" @click.prevent="" catchtap="preventPlay" @touchmove.prevent="" @click.stop="" v-if="info.isVip&&!userStatus.isVip&&$store.state.config.canPlay">
                    <span class="notice">بۇ كىنو ھەقلىق ئىكەن ، ئالىي ئەزالىق ئاچقاندىن كېيىن كۆرەلەيسىز</span>
                    <div class="btn-group">
                        <span class="back" @click.prevent="navigateBack">قايتىش</span>
                    </div>
                </div>
            </template>
            <video id="myVideo" v-if="!isTv&&$store.state.config.canPlay" @timeupdate="timeUpdate" :src="info.videoUrl" @error="videoError" object-fit="fill"></video>
            <video id="myVideo" v-if="isTv&&$store.state.config.canPlay" :src="currTvUrl" @error="videoError" object-fit="fill"></video>
            <div class="detail-wrap">
                <div class="title">{{info.title}}</div>
                <div class="info">
                    <div class="create-time">
                        <i class="myfont icon-lishi"></i>
                        <span class="time">
                            {{formatDate(info.create_time)}}</span>
                    </div>
                    <div class="views">
                        <i class="myfont icon-ai-eye"></i>
                        <span class="view-time">{{info.views?Number(info.views):0}}</span>
                        <i class="myfont icon-dianzan like"></i>
                        <span class="like">{{likeCount}}</span>
                        <i-icon size="20" :style="{marginLeft:'12rpx',color:collect.isLike?'#2b85e4':'inherit'}" :type="collect.isLike?'collection_fill':'collection'" class="collect" @click="handleCollect" />
                        <!-- <i class="iconfont icon-collection collect" :style="{color:isLike.isLike?'#0081ff':'#888'}" @click="collect"></i> -->
                    </div>
                </div>
            </div>
            <!-- 电视剧集结 -->
            <div class="tv" v-if="tvList.length">
                <div class="item" @click="changeTv(item)" :class="{active:(item.xh==activeTv)}" v-for="(item, index) in tvList" :key="index">{{item.xh}}</div>
            </div>
            <!-- 打赏 -->
            <div class="reward" v-if="!($store.state.systemInfo.platform=='ios')">
                <span class="total">
                    <i class="myfont icon-YUAN-circle-fill hongbao"></i>
                    <span>{{admireInfo.time}}قېتىم</span>/
                    <span>{{admireInfo.money}}يۈەن</span>
                </span>
                <span class="btn" @click.stop="showAdmire=true">تارتۇقلاش</span>
                <div class="people">
                    <span class="remind">سىزنىڭ قوللىشىڭىز، بىز ئۈچۈن مەدەت</span>
                    <div class="detail">
                        <span class="person" v-for="(item, index) in admireList" :key="index">
                            <img :src="JSON.parse(item.user_info).avatarUrl" alt="">
                            <!-- <span class="name">{{JSON.parse(item.user_info).nickName.slice(0,3)}}</span> -->
                        </span>
                    </div>
                </div>
            </div>
            <!-- 广告 -->
            <div class="ad">
                <div v-if="adList.isQQ">
                    <ad unit-id="adunit-30186b9b0818886c"></ad>
                </div>
                <img v-else :src="adList.imgUrl" @click="toAd">
            </div>
            <div class="share">
                <div class="title">باشقىلارغا ھەمبەھىرلەش</div>
                <div class="imgs">
                    <span class="item">
                        <button open-type="share"></button>
                        <img src="../../native/images/wechat.png">
                        <span class="title">ئۈندىدار</span>
                    </span>
                    <span class="item" @click="shareMoment">
                        <img src="../../native/images/moment.png">
                        <span class="title">دوستلار چەمبىرىكى</span>
                    </span>
                </div>
            </div>
            <!-- 推荐电影 -->
            <div class="recommend">
                <span class="bar"></span>
                <span class="txt">تەۋسىيە</span>
            </div>
            <div class="recommend-wrap">
                <div class="list">
                    <VideoCover :show="true" v-for="item in recommendList" :key="item.vid" :info="item"></VideoCover>
                </div>
            </div>
        </div>
        <i-toast id="toast" />
        <div class="admire" v-if="showAdmire && !($store.state.systemInfo.platform=='ios')">
            <div class="empty" @click.stop="showAdmire=false"></div>
            <div class="admire">
                <div class="title">تارتۇقلاش</div>
                <span class="notice">تارتۇقلاش سوممىسىنى تاللاڭ</span>
                <div class="price">
                    <span class="yuan" @click="changeAdmire(item,index)" :class="{active:activePrice==index}" v-for="(item, index) in priceList" :key="index">{{item.label}}</span>
                </div>
                <div class="notice2">ڧىلىم يارىغان بولسا بىزنى قوللاپ قويۇڭ</div>
                <div class="inp">
                    <input v-model="currMoney" type="number" style="font-family: 'ALKATIP UI'" placeholder-style="font-family: 'ALKATIP UI'" placeholder="تارتۇقلاش سوممىسىنى كىرگۈزۈڭ" min="0">
                    <span>يۈەن</span>
                </div>
                <div class="submit" @click="admire">تارتۇقلاش</div>
            </div>
        </div>
        <div v-if="showLock" class="lock-bg">
            <div class="content">
                <div class="tip">
                    كىنونى ھەمبەھىرلىگەندىن كېيىن داۋاملىق كۆرەلەيسىز
                    <button open-type="share">ھەمبەھىرلەش</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import { mapState, mapActions, mapGetters } from "vuex";
import VideoCover from "@/components/VideoCover.vue";
import {
    Base64,
    $Toast,
    formatDate,
    _showLoading,
    _sleep,
    $orderNumber
} from "@/utils/index";
export default {
    components: { Navbar, VideoCover },
    data() {
        return {
            activePrice: -1,
            priceList: [
                {
                    label: "1يۈەن",
                    value: 1
                },
                {
                    label: "2يۈەن",
                    value: 2
                },
                {
                    label: "5يۈەن",
                    value: 5
                },
                {
                    label: "10يۈەن",
                    value: 10
                },
                {
                    label: "20يۈەن",
                    value: 20
                },
                {
                    label: "30يۈەن",
                    value: 30
                },
                {
                    label: "50يۈەن",
                    value: 50
                },
                {
                    label: "100يۈەن",
                    value: 100
                }
            ],
            likeCount: Math.floor(Math.random() * (10000 - 10)) + 10,
            admireList: [],
            info: {
                title: "",
                create_time: new Date()
            },
            userStatus: {
                isVip: 0
            },
            collect: {
                isLike: 0
            },
            userInfo: wx.getStorageSync("userInfo"),
            showAdmire: false,
            tvList: [],
            activeTv: 1, //第几集
            isTv: 0,
            currTvUrl: "",
            recommendList: [],
            currMoney: 0, //要打赏的金额
            admireInfo: {
                money: 0,
                time: 0
            }, //打赏总额
            adList: {},
            isBuy: false,
            showLock: false,
            shareFlag: false
        };
    },
    methods: {
        formatDate,
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        shareMoment() {
            this.$store.commit("SET_POSTER", this.info);
            // 跳转到海报保存页
            wx.navigateTo({ url: "/pages/Poster/Poster" });
        },
        videoError() {
            $Toast({
                content: "كىنو قويۇش مەغلۇپ بولدى",
                icon: "warning",
                mask: false
            });
            /* setTimeout(() => {
                wx.navigateBack({
                    delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                });
                $Toast.hide();
            }, 1500); */
        },
        getVideoDetail(vid, type) {
            return new Promise((resolve, reject) => {
                _showLoading();
                this.$http
                    .get("/mpVideoDetail", {
                        vid,
                        uid: this.userInfo.uid,
                        type
                    })
                    .then(res => {
                        if (res.code == "001") {
                            let listStr = res.list
                                .replace(/\&/g, "A")
                                .replace(/\%/g, "B");
                            let list = Base64.decode(listStr);
                            list = JSON.parse(list);
                            setTimeout(() => {
                                $Toast.hide();
                            }, 500);
                            resolve(list);
                        } else {
                            $Toast({
                                content: "كىنو قويۇش مەغلۇپ بولدى",
                                icon: "warning",
                                mask: false
                            });
                        }
                    });
            });
        },
        getRecommendList(sort) {
            try {
                this.$http
                    .get("/mpGetVideo", {
                        from: "recommend",
                        sort
                    })
                    .then(res => {
                        let listStr = res.list
                            .replace(/\&/g, "A")
                            .replace(/\%/g, "B");
                        let list = Base64.decode(listStr);
                        list = JSON.parse(list);
                        this.recommendList = list;
                    });
            } catch (error) {}
        },
        openVip() {
            let sys = this.$store.state.systemInfo;
            if (!this.$store.state.config.iosPay && sys.platform == "ios") {
                wx.showModal({
                    title: "付费提示", //提示的标题,
                    content:
                        "根据平台相关规则付费功能暂未向IOS用户开放,پۇل تۆلەش ئىقتىدارى ۋاقتىنچە ئالما ئابونتلىرىغا ئېتىۋېتىلدى", //提示的内容,
                    showCancel: false, //是否显示取消按钮,
                    confirmText: "知道了", //确定按钮的文字，默认为取消，最多 4 个字符,
                    confirmColor: "#3CC51F", //确定按钮的文字颜色,
                    success: res => {}
                });
                return;
            } else
            wx.navigateTo({ url: "/pages/VIP/VIP" });
            // wx.navigateTo({ url: "/pages/VIP/VIP" });
        },
        buyVideo() {
            let sys = this.$store.state.systemInfo;
            if (sys.platform == "ios") {
                wx.showToast({
                    title: "付费内容暂未向IOS用户开放", //提示的内容,
                    icon: "none", //图标,
                    duration: 2000, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                    success: res => {}
                });
            } else {
                wx.navigateTo({ url: "/pages/Buy/Buy" });
            }
        },
        navigateBack() {
            wx.navigateBack({
                delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
        },
        handleCollect() {
            let { vid } = this.info;
            let { uid } = wx.getStorageSync("userInfo");
            let isLike = Number(!this.collect.isLike);
            try {
                this.$http
                    .get("/mpCollectVideo", { vid, uid, isLike })
                    .then(res => {
                        if (res.code == "001") {
                            this.collect.isLike = !this.collect.isLike;
                            if (this.collect.isLike) {
                                $Toast({
                                    content: "ساقلىۋالدىڭىز",
                                    icon: "success",
                                    mask: false
                                });
                            } else {
                                $Toast({
                                    content: "ئەمەلدىن قالدۇردىڭىز",
                                    icon: "warning",
                                    mask: false
                                });
                            }
                            try {
                                this.$http
                                    .get("/mpGetLike", { uid })
                                    .then(res => {
                                        if (res.code == "001") {
                                            this.$store.commit(
                                                "SET_LIKE",
                                                res.list
                                            );
                                        }
                                    });
                            } catch (error) {}
                        }
                    });
            } catch (error) {
                wx.showToast({
                    title: "مەغلۇپ بولدى", //提示的内容,
                    icon: "error", //图标,
                    duration: 700 //延迟时间,
                });
            }
        },
        preventPlay() {
            return;
        },
        changeTv(item) {
            this.activeTv = item.xh;
            this.currTvUrl = item.url;
        },
        changeAdmire(item, index) {
            if (index == this.activePrice) {
                this.activePrice = null;
                this.currMoney = 0;
            } else {
                this.currMoney = this.priceList[index].value;
                this.activePrice = index;
            }
        },
        admire() {
            wx.showLoading();
            let orderId = $orderNumber(),
                openId = this.$store.state.userInfo.openId,
                payAmount = Math.round(this.currMoney * 100);
            this.$http
                .post("/wxPay", { orderId, openId, total_fee: payAmount })
                .then(res => {
                    let { nonceStr, paySign, signType, timeStamp } = res;
                    var pack = res.package;
                    wx.requestPayment({
                        timeStamp, //时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间,
                        nonceStr, //随机字符串，长度为32个字符以下,
                        package: pack, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*,
                        signType, //签名算法，暂支持 MD5,
                        paySign, //签名,具体签名方案参见小程序支付接口文档,
                        success: res => {
                            wx.hideLoading();
                            $Toast({
                                icon: "success",
                                content: "تارتۇقلىغىنىڭىزغا تەشەككۈر ئېيتىمىز"
                            });
                            this.showAdmire = false;
                            let opt = {
                                orderId,
                                payAmount,
                                money: payAmount,
                                openId,
                                uid: this.$store.state.userInfo.uid,
                                vid: this.info.vid
                            };
                            this.$http.post("/setAdmire", opt).then(res => {});
                        },
                        fail: () => {
                            wx.hideLoading();
                            let opt = {
                                orderId,
                                payAmount,
                                money: payAmount,
                                openId,
                                uid: this.$store.state.userInfo.uid,
                                vid: this.info.vid
                            };
                            this.$http.post("/setAdmire", opt).then(res => {});
                            $Toast({
                                icon: "warning",
                                content: "مەغلۇپ بولدى"
                            });
                        },
                        complete: () => {
                            wx.hideLoading();
                        }
                    });
                });
        },
        async getAdmireList() {
            try {
                let { vid } = this.$root.$mp.query;
                let res = await this.$http.get("/getAwardList", {
                    uid: this.userInfo.uid,
                    vid
                });
                if (res.code == "001") {
                    let totalMoney = 0;
                    res.list.forEach(item => {
                        totalMoney += item.money;
                    });
                    this.admireInfo.money = Math.round(totalMoney / 100);
                    this.admireInfo.time = res.list.length;
                    this.admireList =
                        res.list.length > 21
                            ? res.list.splice(0, 21)
                            : res.list;
                }
            } catch (error) {}
        },
        async getAd() {
            try {
                let res = await this.$http.get("/mpGetVideoAd");
                this.adList = res.data;
            } catch (error) {}
        },
        toAd() {
            let item = this.adList;
            if (item.type == 1 || item.type == 0) {
                wx.setStorageSync("AD", item);
                wx.navigateTo({ url: "/pages/AD/AD" });
            }
            if (item.type == 2) {
                wx.navigateToMiniProgram({
                    appId: item.adUrl, //要打开的小程序 appId,
                    path: "", //打开的页面路径，如果为空则打开首页,
                    success: res => {}
                });
            }
            if (item.type == 3) {
                let info = JSON.parse(item.adUrl);
                wx.navigateTo({
                    url: `/pages/Player/Player?vid=${info.vid}&type=${info.type}&sort=MOVIE`
                });
            }
            if (item.type == 4) {
                wx.navigateTo({ url: item.adUrl });
            }
        },
        timeUpdate(e) {
            let time = e.detail.currentTime;
            let self = this;
            if (this.userStatus.isVip) {
                return;
            } else {
                if (!self.shareFlag && time > 180) {
                    this.showLock = true;
                    this.videoContext.pause();
                    setTimeout(() => {
                        self.shareFlag = true;
                        self.showLock = false;
                        self.videoContext.play();
                    }, 6000);
                } else return;
            }
        },
        checkBuy(vid, uid) {
            this.$http.get(`/mpCheckBuy?uid=${uid}&vid=${vid}`).then(time => {
                if (time && typeof time == "string") {
                    let bol = time.slice(6, 7);
                    if (bol == 1) {
                        this.isBuy = true;
                    } else {
                        this.isBuy = false;
                    }
                }
            });
        }
    },
    onShow() {
        if (this.info.vid) {
            let userInfo = wx.getStorageSync("userInfo");
            let { vid, type, sort } = this.$root.$mp.query;
            this.getVideoDetail(vid, type).then(res => {
                if (res.price || res.isFree) {
                    this.checkBuy(res.vid, userInfo.uid);
                }
                this.$store.commit("SET_VINFO", res);
                if (Number(type)) {
                    this.tvList = JSON.parse(res.qisim);
                    this.currTvUrl = this.tvList[0].url;
                }
                this.videoContext = wx.createVideoContext("myVideo");
                this.info = res;
                let likeList = this.$store.state.likeList;
                let isLike = likeList.find(item => (item.vid = res.vid));
                if (isLike) {
                    this.collect = isLike;
                }
            });
        }
    },
    onShareAppMessage() {
        let self = this;
        return {
            title: this.info.title,
            path: `/pages/Player/Player?vid=${this.info.vid}&sort=${this.info.sort}&type=${this.info.type}`,
            imageUrl: this.info.coverImg,
            success: res => {
                self.shareFlag = true;
                self.showLock = false;
                self.videoContext.play();
            },
            fail: () => {
                self.shareFlag = true;
                self.showLock = false;
                self.videoContext.play();
            },
            complete: () => {}
        };
    },
    onLoad() {
        let userInfo = wx.getStorageSync("userInfo");
        if (userInfo && userInfo.openId && userInfo.uid) {
            this.$store.commit("SET_USERINFO", userInfo);
        } else {
            if (this.$store.state.config.forceLogin) {
                wx.navigateTo({ url: "/pages/Login/Login" });
            } else {
            }
        }
        let userStatus = this.$store.state.userStatus;
        this.userStatus = userStatus;
        try {
            let { vid, type, sort } = this.$root.$mp.query;
            this.getRecommendList(sort);
            this.getAd();
            this.isTv = Number(type);
            this.getVideoDetail(vid, type).then(res => {
                if (res.price || res.isFree) {
                    this.checkBuy(res.vid, userInfo.uid);
                }
                this.$store.commit("SET_VINFO", res);
                if (Number(type)) {
                    this.tvList = JSON.parse(res.qisim);
                    this.currTvUrl = this.tvList[0].url;
                }
                this.videoContext = wx.createVideoContext("myVideo");
                this.info = res;
                if (res.isVip) {
                    let now = Date.now();
                    if (
                        userStatus.startTime < now &&
                        userStatus.endTime > now
                    ) {
                    } else {
                        /* $Toast({
                            content: "سىز تېخى ئالى ئەزالىق ئاچماپسىز",
                            mask: false,
                            duration: 9500
                        }); */
                    }
                }
                let likeList = this.$store.state.likeList;
                let isLike = likeList.find(item => (item.vid = res.vid));
                if (isLike) {
                    this.collect = isLike;
                }
            });
        } catch (error) {
            wx.hideLoading();
            // console.log("error");
        }
        this.getAdmireList();
    },

    filters: {}
};
</script>

<style lang="scss" scoped>
@import url("../../assets/CSS/iconfont.css");
video {
    width: 100%;
}
.container {
    border: 1rpx solid transparent;
    margin: 0;
    .detail-wrap {
        height: 100rpx;
        width: 98%;
        box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx;
        margin: 0 auto 15rpx;
        .title {
            height: 42rpx;
            color: #888;
            padding-top: 12rpx;
            padding-left: 25rpx;
            font-size: 34rpx;
            transform: scaleY(0.78);
        }
        .info {
            height: 42rpx;
            color: #888;
            font-size: 32rpx;
            padding-left: 10rpx;
            i {
                display: inline-block;
                font-size: 28rpx;
            }
            .create-time {
                float: left;
                ::after {
                    content: "";
                    display: block;
                    clear: both;
                }
                .time {
                    font-size: 27rpx;
                }
            }
            .views {
                float: right;
                span {
                    display: inline-block;
                }
                i {
                    margin-left: 15rpx;
                }
                .view-time {
                    margin-left: 15rpx;
                }
                .collect {
                    font-size: 32rpx;
                    margin-right: 15rpx;
                }
                .like {
                    margin-left: 10rpx;
                }
            }
        }
    }
    .tv {
        width: 96%;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx;
        margin: 0 auto 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 15rpx 10rpx;
        &::after {
            content: "";
            flex: auto;
        }
        .item {
            width: 10%;
            height: 55rpx;
            border-radius: 31rpx;
            background-color: #0d0e1f;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10rpx 1%;
            color: #f0f0f0;
        }
        .active {
            color: #ff5c38;
        }
    }
    .reward {
        // height: 100rpx;
        width: 98%;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx;
        margin: 0 auto 10rpx;
        .btn {
            height: 60rpx;
            width: 200rpx;
            display: inline-block;
            background-image: linear-gradient(to right, #ee0979, #ff6a00);
            border-radius: 46rpx;
            text-align: center;
            font-size: 14px;
            line-height: 60rpx;
            color: #fafafa;
            margin-left: 25rpx;
            margin-top: 10rpx;
            opacity: 0.9;
        }
        .total {
            display: inline-block;
            padding-top: 12rpx;
            padding-left: 15rpx;
            font-size: 28rpx;
            i,
            span {
                display: inline-block;
                font-size: 28rpx;
                color: #888;
            }
            .hongbao {
                color: #f50;
                margin-right: 6rpx;
                font-size: 34rpx;
            }
        }
        .people {
            text-align: center;
            padding-bottom: 18rpx;
            .remind {
                color: #f40;
                direction: rtl;
                font-size: 30rpx;
            }
            .detail {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                /* &::after {
                    content: "";
                    flex: auto;
                } */
                .person {
                    display: inline-flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    width: 14%;
                    image {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                        display: inline-block;
                        margin: 5rpx 0 5rpx 0;
                    }
                    .name {
                        font-size: 20rpx;
                        overflow: hidden;
                        text-overflow: clip;
                        white-space: nowrap;
                        color: #123;
                    }
                }
            }
        }
    }
    .share {
        height: 180rpx;
        width: 98%;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx;
        margin: 0 auto 10rpx;
        color: #333333;
        .title {
            text-align: center;
            font-size: 28rpx;
            height: 30rpx;
            padding: 8rpx 0;
        }
        .imgs {
            width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            flex-direction: row;
            .item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin-left: 50rpx;
                image {
                    width: 80rpx;
                    height: 80rpx;
                }
                button {
                    display: none;
                }
            }
        }
    }
    .ad {
        min-height: 220rpx;
        width: 98%;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 20rpx;
        margin: 0 auto 10rpx;
        color: #333333;
        overflow: hidden;
        img {
            height: 280rpx;
            border-radius: 20rpx;
            width: 100%;
        }
    }
    .recommend {
        height: 50rpx;
        width: 98%;
        margin: 0 auto;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 10rpx;
        text-align: left;
        margin-bottom: 10rpx;
        .bar {
            height: 36rpx;
            display: inline-block;
            width: 10rpx;
            background-color: #f40;
            margin-top: 8rpx;
            margin-left: 10rpx;
            border-radius: 5rpx;
            margin-right: 15rpx;
        }
        .txt {
            font-size: 30rpx;
            color: #f40;
            vertical-align: middle;
            display: inline-block;
            margin-bottom: 17rpx;
        }
    }
    .recommend-wrap {
        width: 98%;
        margin: 0 auto;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        border-radius: 10rpx;
        .list {
            display: grid;
            grid-template-columns: 32% 32% 32%;
            grid-column-gap: 15rpx;
        }
    }
}
.not-vip {
    position: fixed;
    left: 0;
    pointer-events: auto;
    width: 100%;
    height: 420rpx;
    margin: 13rpx auto;
    box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.15);
    color: #ffffff;
    // border-radius: 15rpx;
    background-color: rgba(0, 0, 0, 1);
    z-index: 1;
    .btn-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        height: 100%;
        text-align: center;
        color: #ffffff;
        margin-top: 30rpx;
        .open {
            width: 170rpx;
            height: 65rpx;
            display: inline-block;
            line-height: 65rpx;
            border-radius: 35rpx;
            background: linear-gradient(45deg, #ff9700, #ed1c24);
            margin-left: -20vw;
        }
        .back {
            width: 170rpx;
            height: 65rpx;
            line-height: 65rpx;
            display: inline-block;
            border-radius: 35rpx;
            background: linear-gradient(45deg, #39b54a, #8dc63f);
        }
    }
    .notice {
        position: absolute;
        width: 100%;
        // height: 100%;
        margin-top: 9%;
        color: #ffffff;
        font-size: 40rpx;
        text-align: center;
    }
}
.admire {
    position: fixed;
    bottom: 20rpx;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10rpx;
    .empty {
        width: 100%;
        height: 65vh;
    }
    .admire {
        height: 35vh;
        background-color: #fff;
        .title {
            text-align: center;
            line-height: 60rpx;
            border-bottom: 1px solid #eee;
            color: #e44545;
            font-size: 28rpx;
        }
        .notice,
        .notice2 {
            margin-top: 10rpx;
            display: inline-block;
            line-height: 40rpx;
            text-align: left;
            margin-left: 20rpx;
            color: #123;
            font-size: 25rpx;
        }
        .price {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            .yuan {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 25rpx;
                height: 50rpx;
                width: 20%;
                margin: 15rpx 2%;
                direction: rtl;
                border-radius: 15rpx;
                border: 1px solid #eee;
                color: rgba(0, 0, 0, 0.884);
            }
            .active {
                background: rgba(41, 45, 62, 8);
                color: #fafafa;
            }
        }
        .inp {
            margin-top: 15rpx;
            border-bottom: 1px solid #eee;
            display: block;
            padding-bottom: 5rpx;
            margin-bottom: 20rpx;
        }
        input {
            width: 85%;
            color: #123;
            font-size: 25rpx;
            float: left;
            padding: 5rpx 40rpx;
            box-sizing: border-box;
            ::after {
                display: block;
                content: "";
                clear: both;
            }
            span {
                width: 15%;
                font-size: 25rpx;
            }
        }
        .submit {
            width: 60%;
            margin: 0 auto;
            height: 70rpx;
            text-align: center;
            background: rgba(41, 45, 62, 8);
            color: #fafafa;
            font-size: 28rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20rpx;
        }
    }
}
.i-icon {
    font-size: 40rpx;
    margin-left: 12rpx;
}
.lock-bg {
    .content {
        margin-left: 50%;
        margin-top: 50vh;
        transform: translateX(-50%) translateY(-50%);
        width: 80%;
        height: 350rpx;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 40rpx;
        border: 1px solid transparent;
        .tip {
            margin-top: 80rpx;
            text-align: center;
            padding: 0 15rpx;
            color: #1ab494;
            font-size: 39rpx;
            button {
                width: 60%;
                margin-top: 59rpx;
                border-radius: 45rpx;
                color: #fff;
                background-color: #1ab394;
            }
        }
    }
}
</style>